<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios使用</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
    <script crossorigin="anonymous" src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script crossorigin="anonymous" src='https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js'></script>
</head>

<body>
    <div class="container">
        <h2 class="page-header">与 json-server 结合</h2>
        <button class="btn btn-primary" onclick="sendGET()"> 获取所有的电脑信息 </button>
        <button class="btn btn-warning" onclick="sendPOST()"> 新建电脑信息 </button>
        <button class="btn btn-danger" onclick="getComputer()"> 检索数据 </button>
        <button class="btn btn-success" onclick="sendPUT()"> 更新电脑信息 </button>
        <button class="btn btn-info" onclick="sendPatch()"> 局部更新 </button>
        <button class="btn btn-danger" onclick="sendDELETE()"> 删除电脑信息 </button>
        <hr>
        <form class="form-inline">
            <div class="form-group">
                <label for="exampleInputName2">品牌</label>
                <input type="text" name="brand" class="form-control" id="exampleInputName2">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">价格</label>
                <input type="text" name="price" class="form-control" id="exampleInputEmail2" placeholder="">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">颜色</label>
                <input type="text" name="color" class="form-control" id="exampleInputEmail2" placeholder="">
            </div>
            <button type="button" class="btn btn-default" onclick="addComputer()">新增电脑信息</button>
        </form>
        <hr>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <td>id</td>
                    <td>品牌</td>
                    <td>价格</td>
                    <td>颜色</td>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <script>
        /**
         * GET /computers：列出所有商品
         * POST /computers：新建一个商品
         * GET /computers/156：获取某个指定商品的信息
         * PUT /computers/156：更新某个指定商品的信息（提供该商品的全部信息）
         * PATCH /computers/156：更新某个指定商品的信息（提供该商品的部分信息）
         * DELETE /computers/156：删除某个商品
         */
        //1. 创建 json-server 服务
        //2. 发送请求

        function sendGET() {
            //清空 tr
            $('tbody').html('');
            axios
                .get('http://127.0.0.1:3000/computers')
                .then(response => {
                    response.data.forEach(item => {
                        //创建 tr 节点
                        let tr = $(`<tr><td>${item.id}</td><td>${item.brand}</td><td>${item.price}</td><td>${item.color}</td></tr>`)
                        //将 tr 节点插入到 table中
                        $('tbody').append(tr);
                    });
                })
        }

        //绑定事件 添加笔记本信息
        function addComputer(){
            //获取相关数据
            let brand = $('input[name=brand]').val();
            let price = $('input[name=price]').val();
            let color = $('input[name=color]').val();
            //发送请求
            axios({
                method:"POST",
                url: 'http://127.0.0.1:3000/computers',
                data: {brand, price, color}
            }).then(response => {
                alert('添加成功')
            }).catch(error => {
                alert('添加失败');
            })
        }
    </script>
</body>

</html>